<template>
  <div class="logic-flow-container">
    <Circle
      style="position: absolute; top: 20px; left: 20px"
      :circleData="circleData2"
      :level="0"
      :parentNode="circleData2[0]"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Circle from "./circle.vue";

const circleData2 = ref([
  {
    id: 1,
    store_id: 1,
    department_id: 1,
    employee_id: 10,
    parent_id: 0,
    name: "\u738b\u5c0f\u6797",
    portrait: "",
    department_name: "\u5e97\u957f",
    aim: {
      aim: 100,
      type: 0,
    },
    children: [
      {
        id: 2,
        store_id: 1,
        department_id: 4,
        employee_id: 25,
        parent_id: 1,
        name: "\u7530\u4e3d\u4e3d",
        portrait: "",
        department_name: "\u670d\u52a1\u5458",
        aim: {
          aim: "",
          type: 0,
        },
      },
      {
        id: 3,
        store_id: 1,
        department_id: 4,
        employee_id: 17,
        parent_id: 1,
        name: "\u5f20\u6708",
        portrait: "",
        department_name: "\u53a8\u5e08\u957f",
        aim: [],
        children: [
          {
            id: 4,
            store_id: 1,
            department_id: 6,
            employee_id: 31,
            parent_id: 3,
            name: "\u9648\u6c34",
            portrait: "",
            department_name: "\u53a8\u5e08",
            aim: [],
          },
          {
            id: 5,
            store_id: 1,
            department_id: 6,
            employee_id: 35,
            parent_id: 3,
            name: "\u5f20\u4e1c\u5065",
            portrait: "",
            department_name: "\u53a8\u5e08",
            aim: [],
          },
        ],
      },
    ],
  },
]);

const circleData = ref([
  {
    name: "1",
    children: [
      {
        name: "1-1",
        children: [
          {
            name: "1-1-1",
            children: [
              {
                name: "1-1-1-1",
                children: [],
              },
              {
                name: "1-1-1-2",
                children: [],
              },
              {
                name: "1-1-1-3",
                children: [],
              },
              {
                name: "1-1-1-4",
                children: [],
              },
              {
                name: "1-1-1-5",
                children: [],
              },
            ],
          },
        ],
      },
      {
        name: "1-2",
        children: [
          {
            name: "1-2-1",
            children: [],
          },
          {
            name: "1-2-2",
            children: [],
          },
        ],
      },
      {
        name: "1-3",
        children: [],
      },
    ],
  },
]);

const hasChild = (treeNode) => {
  return treeNode && treeNode.children && treeNode.children.length > 0;
};

let totalIndex = 0;
const leafRecurse = (tree: any, level) => {
  tree.level = level;
  tree.top = level * 120;
  if (hasChild(tree)) {
    tree.children.forEach((node: any) => {
      leafRecurse(node, level + 1);
    });
    tree.position =
      (tree.children[0].position +
        tree.children[tree.children.length - 1].position) /
      2;
    tree.left = tree.position * 120;
  } else {
    tree.position = totalIndex;
    tree.left = tree.position * 120;
    totalIndex++;
    return tree.position;
  }
};

leafRecurse(circleData2.value[0], 0);

console.log(circleData.value[0]);
</script>

<style scoped>
.logic-flow-container {
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  margin: 10px;

  position: relative;
  background-color: #ebebeb;
}
</style>
